<!-- 扩展上传组件，支持自定义url字段名称 -->
<script>
/**
 * <van-field
            class="custom-form-field"
            label="上传照片"
            required
            :disabled="readonly"
    >
        <upload slot="input" class="custom-upload" :max-count="10" url="/api/match_query/v1/upload" multiple :disabled="readonly" :deletable="!readonly" v-model="formData.otherdata"/>
    </van-field>
 */

import {Utils} from 'jboot-env';
    import {Uploader, ImagePreview} from 'vant';
    import {isImageFile} from 'vant/lib/uploader/utils';

    export default {
        name: 'Upload',

        extends: Uploader,

        props: {
            afterRead: {
                type: Function,
                default (files, detail){
                    this.handleUpload(files, detail);
                }
            },

            urlField: {
                type: String,
                default: 'previewUrl'
            },

            url: String
        },

        methods: {
            handleUpload (files, detail){
                const isArray = Utils.typeEqual(files, Array);

                const fileList = isArray ? files : [files];

                fileList.forEach(item => {
                    const formData = new FormData();

                    formData.append('file', item.file);

                    item.status = 'uploading';
                    item.message = '上传中';

                    this.$ajax({
                        baseURL: '/__api/',
                        method: 'POST',
                        url: this.url,
                        data: formData,
                        loading: false
                    }).then(response => {
                        item.status = 'done';
                        item.message = '上传完成';

                        const responseData = response.data;

                        Object.keys(response.data).map(key => {
                            item[key] = responseData[key];
                        });
                    }, error => {
                        item.status = 'failed';
                        item.message = error?.message || '上传失败';
                    })
                });
            },

            genPreviewList() {
                const {previewImage, fileList, urlField} = this;

                if (previewImage) {
                    return fileList.map((item, index) => {
                        item.url = item[urlField];

                        return this.genPreviewItem(item, index);
                    });
                }
            },

            onPreviewImage(imageItem) {
                const {previewFullImage, fileList, urlField, content} = this;

                if (!previewFullImage) return;

                const imageFiles = fileList.slice(0).map(item => ({url: item[urlField] || content, ...item})).filter(isImageFile);

                const imageContents = this.handleExtractUrl(imageFiles);

                this.imagePreview = ImagePreview(Object.assign({
                    images: imageContents,
                    startPosition: imageContents.indexOf(this.handleExtractUrl([imageItem])[0]),
                    onClose: () => this.$emit('close-preview')
                }, this.previewOptions));
            },

            handleExtractUrl (fileList){
                return fileList.map(item => {
                    const {file, url, [this.urlField]: curl, content} = item;

                    if (file && !url) {
                        item.url = URL.createObjectURL(file);

                        this.urls.push(item.url);
                    }

                    return url || curl || content;
                });
            }
        }
    }
</script>

<style lang="scss">

</style>
